<!-- 首页 -->
<template>
	<view class="page">
		<view style="height: 90px;" class="head-info">
			<view class="head-search" style="height: 20px;margin-top: 10px;">
				<view class="icon" style="width: 100%;justify-content: center; ">
					<view @click="choiceAddress()">
						<image src="/static/addres.png" mode=""></image>
						<text style="font-size: 16px;">{{address}}</text>
					</view>
				</view>
			</view> 
			<!-- 搜索 -->
			<view class="head-search">
				<view style="width: 99%;margin-top: 20px;" class="search" @click="onSearch">
					<view class="icon">
						<image src="/static/fdj_ico.png" mode=""></image>
					</view>
					<view class="hint">
						<text class="max">搜索</text>
						<text class="min">热门内容</text>
					</view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"
			:top="0">
			<view class="main" v-show="classifyShow===0">
				<!-- banner -->
				<view class="banner">
					<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
						interval="5000" duration="500">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image :src="item.url" mode="aspectFill"></image>
							<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
						</swiper-item>
					</swiper>
				</view>
				<!-- 菜单导航 -->
			</view>
				<!-- 为你推荐 -->
				<view class="recommend-info">
					<view class="recommend-title">
						<view class="title">
							<image src="/static/wntj_title.png" mode=""></image>
						</view>
					</view>
					<view class="goods-list">
						<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods',item.goodsId,item.goodsPrice,item.activityPrice,item.test,item.goodsInfo,item.num,item.img,item.goodsName)" :key="index">
							<view class="pictrue">
								<image :src="ip+item.img" mode="heightFix"></image>
							</view>
							
							<view class="title-tag">
								<view class="tag">
									<text v-if="item.offer === 15">特价</text>
									{{item.goodsName}}
								</view>
							</view>
							<view class="price-info">
								<view class="user-price">
									<text class="min">￥</text>
									<text class="max">{{item.goodsPrice}}</text>
								</view>
								<view class="vip-price">
									<!-- <image src="/static/vip_ico.png"></image> -->
									<text>￥{{item.activityPrice}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
		</mescroll-body>
		<!-- <ClassifyData v-show="classifyShow!=0"></ClassifyData> -->
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import amap from "@/config/amap-wx.130.js";
	import {baseUrl} from '@/config/baseUrl.js';
	// import ClassifyData from '../../components/ClassifyData/ClassifyData.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false
				},
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/banner_02.png'
					},
					{
						id: 2,
						type: 'image',
						url: '/static/img/banner_03.png'
					}
				],
				slideNum: 0,
				navList: [{
					id: 1,
					name: '手机专区',
				}, {
					id: 2,
					name: '潮牌男装',
				}, {
					id: 3,
					name: '运动男装',
				}, {
					id: 4,
					name: '时尚背包',
				}, {
					id: 5,
					name: '台式电脑',
				}, {
					id: 6,
					name: '珠宝首饰',
				}, {
					id: 7,
					name: '美颜美妆',
				}, {
					id: 8,
					name: '家用电器',
				}, {
					id: 9,
					name: '洗护用品',
				}, {
					id: 10,
					name: '台式电脑',
				}],
				goodsList: [],
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
				//地图
				amapPlugin: null,
				key: '0a1e26c6705378ca402b54fd90249684', //高德地图key
				markers: [],
				poisdatas: [],
				address: "", //当前地址
				latitude: "", //纬度
				longitude: "", //经度
				ip:"http://43.142.173.112:9090/images/",
				userId: 1, //用户id

				shopsId: 0, //分店id
			}
		},
		onReady() {
			uni.hideTabBar();
			// #ifdef MP
			uni.setNavigationBarTitle({
				title: '首页',
			})
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fe3b0f',
			})
			// #endif
		},
		onLoad(option) {
			
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onReachBottom() {
			console.log(12333);
		},
		mounted() {
			this.getAddress();
		},
		methods: {
			
			//获取首页数据
			getData() {
				console.log("分店",uni.getStorageSync("shopsId"))
				console.log("用户",uni.getStorageSync("userId"))
				uni.request({
					url: baseUrl + "/index/recommend",
					method: 'POST',
					data: {

						shopsId: this.shopsId,

						userId: uni.getStorageSync("userId"),
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log("为你推荐",res.data.goodsList)
						this.goodsList = res.data.goodsList
						
					}
				})
			},
			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav').boundingClientRect(data => {
					let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
					this.slideNum = (scrollLeft / wid * 300) / 2;
				}).exec();
			},
			/**
			 * 搜索点击
			 */
			onSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(item, index) {
				this.classifyShow = index;
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type,goodsId,goodsPrice,activityPrice,test,goodsInfo,num,img,goodsName) {
				switch (type) {
					case 'mess':
						uni.navigateTo({
							url: '/pages/Message/Message'
						})
						break;
					case 'paycode':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode'
						})
						break;
					case 'menu':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList'
						})
						break;
					case 'inform':
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails?goodsId='+goodsId+'&goodsPrice='+goodsPrice+'&activityPrice='+activityPrice+'&test='+test+'&goodsInfo='+goodsInfo+'&num='+num+'&img='+img+'&goodsName='+goodsName,
							animationType: 'zoom-fade-out',
							animationDuration: 200,
		
						})
						break;
				}
			},
			getAddress() {
				const _this = this;
				this.amapPlugin = new amap.AMapWX({
					key: this.key
				});
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '当前定位')
						// _this.address = `${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;
						_this.address = data[0].desc
						// uni.setStorageSync("address",data[0].regeocodeData.addressComponent.district);
						console.log("当前地址",data[0].regeocodeData.addressComponent.district)
						this.latitude = data[0].latitude
						this.longitude = data[0].longitude
						uni.setStorageSync("latitude", this.latitude);
						uni.setStorageSync("longitude", this.longitude);
						uni.request({
							// 192.168.2.111 本机ip  localhost
							url: baseUrl + "/index/getUserAddress",
							method: 'POST',
							data: {
								userId:this.userId,
								lat: this.latitude,
								lng: this.longitude
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded"
							},
							success: (res) => {
								console.log(res);
								if (res.data.shopsId != 0) {
									this.shopsId = res.data.shopsId

									this.getData();

									console.log("shopsId",this.shopsId)
									uni.setStorageSync("shopsId", this.shopsId);
									uni.setStorageSync("addressId", res.data.addressId);
									this.getData();
								} else {
									uni.setStorageSync("shopsId:",0);
									uni.showToast({
										title: "您目所在的区域和填写的配送地址不在配送范围内",
										icon: "none",
										duration: 5000,
									})
								}
							}
						})
						uni.hideLoading();
					},
					// 获取位置失败
					fail: (err) => {
						uni.showToast({
							title: "获取位置失败，请重启小程序",
							icon: "none"
						})
					}
				});
			},
			//跳转至用户选择地址页面
			choiceAddress() {
				uni.navigateTo({
					url: '/pages/UserMap/UserMap?lat=' + this.latitude + '&lng=' + this.longitude
				})
			},
			//用户自己选择完地址后返回回来的数据的方法
			addressObj(selectAddr) {
				this.address = selectAddr.address
				this.latitude = selectAddr.latitude
				this.longitude = selectAddr.longitude
				this.getData();
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';
</style>
